- USER CENTERED DESIGN -
SKILL 1.6
Debriefing
Bij de opdracht willen ze een interface voor een educatieve game om de aandacht van leerlingen tussen de 6 en de 10 jaar op basisscholen er beter bij te houden met meer interactief onderwijs, zodat ze minder boeken hoeven te gebruiken. Het moet voor het vak Engels, Nederlands, rekenen geschiedenis of aardrijkskunde.
Je moet vergelijkbare producten onderzoeken en kijken wat voor assets deze games gebruiken, onderzoekt wat wireframes zijn en doen, maakt prototypes en gaat aan de slag met Adobe XD en Illustrator.
Product analyse
Ik heb voornamelijk online web games onderzocht. Ik realiseerde me achteraf pas dat dit natuurlijk apps hadden moeten zijn, maar heb we wat gebruik gemaakt van die educatieve web games.
Dingen die mij in de web games opvielen waren:
- Interessant laadscherm met een animatie en de titel van het spel. De animatie is soms een poppetje dat simpel ronddraait of het is een video die op de achtergrond beweegt.
- Knoppen bewegen of worden groter en kleiner als het de bedoeling is dat je erop drukt, voornamelijk knoppen als ‘begin’ of ‘start’.
- Verschillende levels, soms is dat letterlijk nieuwe werelden of ruimtes, soms is dat een moeilijkheidsgraad die het level bepaalt.
- Het educatieve aspect van de game is op een leuke manier gebracht, met vrolijke kleuren of het kiezen van een personage.
Wat ik hiervan in mijn eigen design heb gebruikt is de animaties bij laadschermen en dat het educatieve aspect van het spelletje op een leuke manier gebracht word. Ik heb dat voornamelijk met kleuren verwerkt.
Dit zijn de linkjes naar de web games die ik heb bekeken en gespeeld heb:
XD uitwerking
Ik had nog nooit eerder met xd gewerkt en we kregen een korte uitleg in de les, en toen ben ik eigenlijk meteen een beetje gaan rotzooien met het progamma. Welke knop doet wat, wat gebeurt als ik hier op druk en een hele hoop control z.
Ik heb niet echt wireframes gemaakt, maar ben gewoon begonnen met vormen en heb toen random wat kleuren gedaan, gewoon om te kijken hoe alles werkte en wat er goed uitzag en wat niet.
Dit is een beetje de eerste opzet, gedaan in maar een paar minuutjes.
Ik had eerst twee lichte tinten groen als kleuren gepakt, omdat ik eigenlijk dacht dat we de hele app over een van de school vakken moesten maken en ik had aardrijkskunde gekozen, dus ik dacht dan maak ik alles groenig. Toen ik nog eens las wat er nou eigenlijk stond, heb ik de andere vakken ook toegevoegd met, voor nu nog even, plaatjes van het internet en freepik.
Toen ben ik de links gaan proberen en heb ik het interactief gemaakt. Het was nog een beetje experimenteren op dit punt en kijken wat het progamma doet en kan.
Toen ben ik pas gericht gaan kijken en bedenken wat ik wou maken. Ik had deze plaatjes gevonden in nog wat onderzoek naar apps in plaats van web games.
Het viel mij op dat er vaak zo'n menu of balk aan de onderkant zat met knoppen als home of profiel en dat bovenaan dan vaak stond in waar in de app je bent. Ook zag ik veel fellere kleuren dan wat ik had, dus heb ik mijn design aangepast.
Ik heb het Chalkduster lettertype gebruikt op het home scherm omdat het wel een app voor op school is en zo'n krijtbord doet me daar wel aan denken. Ik heb ook een beker met een sterretje als een soort award systeem erin gezet omdat ik vaak zag dat er dingen verdient konden worden bij afgeronde taken in andere apps en games en heb ook een opdrachten tekentje erin zitten. De instellingen en het profiel doen het helaas niet, daar had ik geen tijd meer voor. Ik heb wel de vak icons in de rondjes op het homescherm gemaakt in illustrator.
Ik had nog nooit met illustrator gewerkt, dus ging ik hetzelfde proces in als met xd. Kijken wat alles doet en welke knop doet wat je wil. De icons zijn zeker geïnspireerd door en sommige zelfs letterlijk overgenomen van de icons die ik op freepik had gevonden.
Hieronder zie je nog het resultaten scherm en de opdrachten. Ik heb voor nu alleen even aardrijkskunde toegevoegd omdat dat het vak is dat ik verder uit heb gewerkt.
Ik heb de kleuren bij het vak groen gehouden omdat ik dat goed vond passen. Ik heb de drie animaties als laadschermen toegevoegd zoals ik had gezien in andere apps en games en heb de icons op deze pagina's niet zelf gemaakt omdat ik in tijdnood geraakt was. Ik had niet goed ingeschat hoeveel tijd het maken van de andere icons zou kosten aangezien ik nog nooit met Illustrator had gewerkt.
Reflectie
In het begin was ik vrij sceptisch en had ik hier helemaal geen zin in omdat de hele periode eigenlijk al om games ging en ik heb gewoon simpelweg niet zoveel met games of interfaces en dingen zoals dat.
